<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="7">
          <el-input
            placeholder="请输入内容"
            clearable
            @clear="getUserList"
            v-model="queryModel.query"
          >
            <el-button
              icon="el-icon-search"
              slot="append"
              @click="search"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="16">
          <el-button type="primary" @click="add = dialogFormVisible = true"
            >添加用户</el-button
          >
        </el-col>
      </el-row>
      <!-- 对话框 -->
      <el-dialog title="添加信息" :visible.sync="dialogFormVisible">
        <el-form :model="model" :rules="rules" ref="ruleForm">
          <el-form-item
            label="用户名"
            :label-width="formLabelWidth"
            prop="username"
          >
            <el-input v-model="model.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="密码"
            :label-width="formLabelWidth"
            prop="password"
          >
            <el-input v-model="model.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
            <el-input v-model="model.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="手机"
            :label-width="formLabelWidth"
            prop="mobile"
          >
            <el-input v-model="model.mobile" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUser">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改框 -->
      <el-dialog title="修改信息" :visible.sync="editdialog">
        <el-form :model="info" :rules="rules" ref="ruleForm">
          <el-form-item
            label="用户名"
            :label-width="formLabelWidth"
            prop="username"
          >
            <el-input
              disabled
              v-model="info.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
            <el-input v-model="info.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="手机"
            :label-width="formLabelWidth"
            prop="mobile"
          >
            <el-input v-model="info.mobile" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editdialog = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 分配权限 -->
      <el-dialog title="分配角色" :visible.sync="roledialog">
        <el-form :model="model">
          <p>当前的用户：{{ model.username }}</p>
          <p>当前的角色：{{ model.role_name }}</p>
          <el-select placeholder="请选择" v-model="model.rid">
            <el-option
              v-for="item in roles"
              :key="item.id"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="roledialog = false">取 消</el-button>
          <el-button type="primary" @click="setRoles" :loading="queryLoading"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <MyTable
        :loading="tableLoading"
        :data="list"
        :cols="cols"
        v-model="queryModel"
        @change="getUserList"
        :total="total"
      >
        <template v-slot:state="{ row }">
          <el-switch
            v-model="row.mg_state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="getswitch(row)"
          >
          </el-switch>
        </template>
        <template v-slot:action="{ row }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="edit(row)"
          ></el-button>
          <el-button
            type="warning"
            icon="el-icon-setting"
            size="mini"
            @click="
              getRoleList();
              model = { ...row };
            "
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="getDelete(row)"
          ></el-button>
        </template>
      </MyTable>
    </el-card>
  </div>
</template>

<script>
import {
  getUsers,
  getDelete,
  addUser,
  getEdit,
  getRole,
  getSwitch,
  updateRole,
} from "@/api/user";
import { pageMixins } from "@/Minins/BaseMixins";
import { MessageBox, Message } from "element-ui";
export default {
  mixins: [pageMixins],
  components: { MessageBox, Message },
  data() {
    return {
      //角色列表
      roles: [],
      // 权限框
      roledialog: false,
      // 权限信息
      Role: {},
      //修改框
      editdialog: false,
      //修改信息
      info: {},
      //宽度
      formLabelWidth: "120px",
      // 添加框
      dialogFormVisible: false,
      // 添加信息
      model: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      // 验证
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            max: 18,
            message: "长度在 5 到 18 个字符",
            trigger: "blur",
          },
        ],
        email: [
          { type: "email", message: "请输入邮箱", trigger: "blur" },
          {
            min: 3,
            max: 18,
            message: "长度在 3 到 18 个字符",
            trigger: "blur",
          },
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 1,
            max: 11,
            message: "长度在 1 到 11 个字符",
            trigger: "change",
          },
        ],
      },
      queryLoading: false,
      /**
       * 添加form模型
       */
      form: {},
      /**
       * 表格模型
       */
      tableLoading: false,
      /**
       * 列
       */
      cols: [
        {
          title: "#",
          type: "index",
        },
        {
          title: "姓名",
          name: "username",
        },
        {
          title: "邮箱",
          name: "email",
        },
        {
          title: "电话",
          name: "mobile",
        },
        {
          title: "角色",
          name: "role_name",
        },
        {
          title: "状态",
          slot: "state",
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          width: 270,
        },
      ],
    };
  },
  methods: {
    /**
     * 设置角色
     */
    async setRoles() {
      try {
        if (!this.model.rid) return Message("请选择用户角色");
        this.queryLoading = true;
        await updateRole(this.model.id, this.model.rid);
        Message.success("角色更新成功");
        this.getUserList();
        this.roledialog = false;
      } catch (error) {}
      this.queryLoading = false;
    },
    //获取角色列表
    async getRoleList() {
      try {
        this.roledialog = true;
        this.roles = await getRole();
        //  console.log( this.roles);
      } catch (error) {}
    },
    //状态
    async getswitch({ id, mg_state }) {
      try {
        await getSwitch(id, mg_state);
        Message.success("状态修改成功");
        this.getUserList();
      } catch (error) {}
    },
    //修改
    //回填信息
    edit(info) {
      this.info = info;
      this.editdialog = true;
    },
    async save() {
      try {
        await getEdit(this.info.id, this.info);
        Message.success("修改成功");
        this.getUserList();
      } catch (error) {}
      this.editdialog = false;
    },
    //搜索
    search() {
      this.queryModel.pagenum = 1;
      this.getUserList();
    },
    //添加用户
    async addUser() {
      try {
        this.$refs.ruleForm.validate();
        await addUser(this.model);
        Message.success("成功");
        this.getUserList();
      } catch (error) {
        console.log(error);
      }
      this.dialogFormVisible = false;
      this.model = {};
    },
    //删除用户信息
    getDelete({ id }) {
      MessageBox.confirm("确定要删除嘛？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          Message({
            type: "success",
            message: "删除成功!",
          });
          await getDelete(id);
          this.getUserList();
        })
        .catch(() => {
          Message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //获取用户信息
    async getUserList() {
      try {
        const { total, users } = await getUsers(this.queryModel);
        this.total = total;
        this.list = users;
      } catch (error) {}
    },
  },
  created() {
    this.getUserList();
  },
};
</script>

<style scoped lang="scss">
.el-col {
  margin-left: 10px;
}
</style>
